<template>
  <div class="box">
    <el-table :data="stuData" stripe border row-style="height:90px" style="width: 80%;
                                                  margin: 0 auto;  
                                                  font-size: 30px;">
      <el-table-column label="组名" width="180">
        <template #default="scope">
          <span style="color: black;" > <strong>{{ scope.row.name }}</strong> </span>
        </template>
      </el-table-column>
      <el-table-column label="AI工具应用">
        <template #default="scope">
          <el-input v-model="scope.row.model"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="任务成效">
        <template #default="scope">
          <el-input v-model="scope.row.design"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="特色创新">
        <template #default="scope">
          <el-input v-model="scope.row.characteristic"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="职业素养">
        <template #default="scope">
          <el-input v-model="scope.row.professional"></el-input>
        </template>
      </el-table-column>
    </el-table>

    <el-button type="primary" size="large" style="margin: 20px auto;width: 100px;font-size: 25px;"
      @click="open">提交</el-button>
  </div>
</template>

<script setup>
import { Timer } from '@element-plus/icons-vue'
import { h } from 'vue'

const open = () => {
  ElNotification({
    title: '提示',
    message: h('i', { style: 'color: teal' }, '提交成功'),
  })
}




const stuData = [
  {
    id: '1',
    name: "知行组",
    model: '',
    design: '',
    characteristic: '',
    professional: ''
  },
  {
    id: '2',
    name: "好学组",
    model: '',
    design: '',
    characteristic: '',
    professional: ''
  },
  {
    id: '3',
    name: "善学组",
    model: '',
    design: '',
    characteristic: '',
    professional: ''
  },
  {
    id: '4',
    name: "崇学组",
    model: '',
    design: '',
    characteristic: '',
    professional: ''
  },
  {
    id: '5',
    name: "思行组",
    model: '',
    design: '',
    characteristic: '',
    professional: ''
  },
  {
    id: '6',
    name: "力行组",
    model: '',
    design: '',
    characteristic: '',
    professional: ''
  },
]
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;

}

:deep .el-table .cell {
  line-height: 40px;
  color: black;
}

 .el-input {
  height: 50px;
  font-size: 30px;
  --el-input-text-color:black;
}
</style>